<template>
	<div class="btnWrap" :style="{left: position.x + 'px',top: position.y + 'px'}">
        <a 
            class="rightBtn" 
            @click="rightClick('createChapter')"
            href="javascript:void(0);">
            <span>新建页面</span>
        </a>
        <a 
            class="rightBtn"
            v-if="btnType != ''"
            @click="rightClick('delete')"
            href="javascript:void(0);">
            <span>删除</span>
        </a>
        <a
            class="rightBtn" 
            @click="rightClick('cancel')"
            href="javascript:void(0);">
            <span>取消</span>
        </a>
    </div>
</template>
<script type="text/javascript">
    export default{
        props:{
            position:{
                type:Object,
                default:() => {}
            },
            item:{
                type:Object,
                default:() => {}
            }
        },
        data () {
            return {
                btnType:""
            }
        },
        created (){
            //判断区域
            if(JSON.stringify(this.item) == '{}'){
                //空白区域
                this.btnType = "";
            }else if(typeof this.item.secMenu != 'undefined'){
                //章节
                this.btnType = "chapter";
            }else{
                //节点
                this.btnType = "dom";
            }
        },
        destroyed() {
            this.$mitt.all.clear();
        },
        watch:{
            
        },
        components : {
            
        },
        methods : {
            rightClick(click){
                this.$mitt.emit("rightClick",click);
            }
        }
    }
</script>
<style type="text/css" lang="less" scoped>
	.btnWrap{
        width: 90px;
        background-color: white;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        text-align: center;
        border: 1px solid #eee;
    }
    .rightBtn{
        padding: 10px;
        display: block;
        color: rgb(79, 89, 105);
        font-size: 12px;
        border-bottom:  1px solid #eee;
    }
</style>